<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Barlow:400,500,700|Playfair+Display" rel="stylesheet">
    <link rel="stylesheet" type="text/css" th:href="@{../static/login/base.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{../static/login/demo1.css?v=1.0.2}" />
    <th:block th:include="include :: header('登录')" />

    <style>
        /*登录框*/
        .form-horizontal{
            background: rgba(255,255,255,0.1);
            padding-bottom: 40px;
            border-radius: 15px;
            text-align: center;
        }
        .form-horizontal .heading{
            display: block;
            font-size: 25px;
            font-weight: 700;
            padding: 17px 0 10px 0;
            border-bottom: 1px solid #f0f0f0;
            margin-bottom: 30px;
        }
        .form-horizontal .form-group{
            padding: 0 40px;
            margin: 0 0 25px 0;
            position: relative;
        }
        .form-horizontal .form-control{
            background: #f0f0f0;
            border: none;
            border-radius: 20px;
            box-shadow: none;
            padding: 0 20px 0 45px;
            height: 40px;
            transition: all 0.3s ease 0s;
        }
        .form-horizontal .form-control:focus{
            background: #e0e0e0;
            box-shadow: none;
            outline: 0 none;
        }
        .form-horizontal .form-group i{
            position: absolute;
            top: 12px;
            left: 60px;
            font-size: 17px;
            color: #c8c8c8;
            transition : all 0.5s ease 0s;
        }
        .form-horizontal .form-control:focus + i{
            color: #00b4ef;
        }
        .form-horizontal .fa-question-circle{
            display: inline-block;
            position: absolute;
            top: 12px;
            right: 60px;
            font-size: 20px;
            color: #808080;
            transition: all 0.5s ease 0s;
        }
        .form-horizontal .fa-question-circle:hover{
            color: #000;
        }
        .form-horizontal .main-checkbox{
            float: left;
            width: 20px;
            height: 20px;
            background: #11a3fc;
            border-radius: 50%;
            position: relative;
            margin: 5px 0 0 5px;
            border: 1px solid #11a3fc;
        }
        .form-horizontal .main-checkbox label{
            width: 20px;
            height: 20px;
            position: absolute;
            top: 0;
            left: 0;
            cursor: pointer;
        }
        .form-horizontal .main-checkbox label:after{
            content: "";
            width: 10px;
            height: 5px;
            position: absolute;
            top: 5px;
            left: 4px;
            border: 3px solid #fff;
            border-top: none;
            border-right: none;
            background: transparent;
            opacity: 0;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }
        .form-horizontal .main-checkbox input[type=checkbox]{
            visibility: hidden;
        }
        .form-horizontal .main-checkbox input[type=checkbox]:checked + label:after{
            opacity: 1;
        }
        .form-horizontal .text{
            float: left;
            margin-left: 7px;
            line-height: 20px;
            padding-top: 5px;
            text-transform: capitalize;
        }
        .form-horizontal .btn{
            float: right;
            font-size: 14px;
            color: #fff;
            background: #00b4ef;
            border-radius: 30px;
            padding: 10px 25px;
            border: none;
            text-transform: capitalize;
            transition: all 0.5s ease 0s;
        }
        @media only screen and (max-width: 479px){
            .form-horizontal .form-group{
                padding: 0 25px;
            }
            .form-horizontal .form-group i{
                left: 45px;
            }
            .form-horizontal .btn{
                padding: 10px 20px;
            }
        }
    </style>

</head>

<script th:src="@{../static/plugins/pace/js/pace.min.js}"></script>
<script th:src="@{../static/js/jquery-2.2.4.min.js}"></script>
<script th:src="@{../static/js/bootstrap.min.js}"></script>
<script th:src="@{../static/js/nifty.min.js}"></script>
<script th:src="@{../static/plugins/jquery-validation/1.15.0/jquery.validate.min.js}"></script>
<script th:src="@{../static/js/core/app-common.js?v=0.0.1}"></script>

<body class="demo-1">
<div id="bg-overlay" class="satic-area">
    <div id="container" class="cls-container" style="background: #000; z-index: 555">

        <div class="col-xs-8" style="padding: 0">
            <svg class="hidden">
                <symbol id="icon-arrow" viewBox="0 0 24 24">
                    <title>arrow</title>
                    <polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
                </symbol>
                <symbol id="icon-drop" viewBox="0 0 24 24">
                    <title>drop</title>
                    <path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/>
                </symbol>
                <symbol id="icon-github" viewBox="0 0 32.6 31.8">
                    <title>github</title>
                    <path d="M16.3,0C7.3,0,0,7.3,0,16.3c0,7.2,4.7,13.3,11.1,15.5c0.8,0.1,1.1-0.4,1.1-0.8c0-0.4,0-1.4,0-2.8c-4.5,1-5.5-2.2-5.5-2.2c-0.7-1.9-1.8-2.4-1.8-2.4c-1.5-1,0.1-1,0.1-1c1.6,0.1,2.5,1.7,2.5,1.7c1.5,2.5,3.8,1.8,4.7,1.4c0.1-1.1,0.6-1.8,1-2.2c-3.6-0.4-7.4-1.8-7.4-8.1c0-1.8,0.6-3.2,1.7-4.4C7.4,10.7,6.8,9,7.7,6.8c0,0,1.4-0.4,4.5,1.7c1.3-0.4,2.7-0.5,4.1-0.5c1.4,0,2.8,0.2,4.1,0.5c3.1-2.1,4.5-1.7,4.5-1.7c0.9,2.2,0.3,3.9,0.2,4.3c1,1.1,1.7,2.6,1.7,4.4c0,6.3-3.8,7.6-7.4,8c0.6,0.5,1.1,1.5,1.1,3c0,2.2,0,3.9,0,4.5c0,0.4,0.3,0.9,1.1,0.8c6.5-2.2,11.1-8.3,11.1-15.5C32.6,7.3,25.3,0,16.3,0z"/>
                </symbol>
                <symbol id="icon-keyboard" viewBox="0 0 100 70">
                    <title>keyboard</title>
                    <!-- https://thenounproject.com/term/keyboard/783/ by Paul te Kortschot from the Noun Project -->
                    <path d="M 60.94,1.83 39.22,1.83 C 36.71,1.83 34.67,3.86 34.67,6.376 L 34.67,28.1 C 34.67,30.61 36.71,32.65 39.22,32.65 L 60.94,32.65 C 63.45,32.65 65.5,30.61 65.5,28.1 L 65.5,6.376 C 65.5,3.86 63.45,1.83 60.94,1.83 Z M 44.79,18.63 50.08,11.74 55.37,18.63 Z" opacity="0.2"/>
                    <path d="M 60.86,36.75 39.14,36.75 C 36.63,36.75 34.59,38.79 34.59,41.3 L 34.59,63.02 C 34.59,65.53 36.63,67.57 39.14,67.57 L 60.86,67.57 C 63.38,67.57 65.41,65.53 65.41,63.02 L 65.41,41.3 C 65.42,38.79 63.38,36.75 60.86,36.75 Z M 50.08,57.45 44.79,50.55 55.37,50.55 Z" opacity="0.2" />
                    <path d="M 95.45,36.75 73.73,36.75 C 71.22,36.75 69.18,38.79 69.18,41.3 L 69.18,63.02 C 69.18,65.53 71.22,67.57 73.73,67.57 L 95.45,67.57 C 97.97,67.57 100,65.53 100,63.02 L 100,41.3 C 100,38.79 97.97,36.75 95.45,36.75 Z M 83.4,57.45 83.4,46.86 90.3,52.16 Z" />
                    <path d="M 26.27,36.75 4.55,36.75 C 2.037,36.75 0,38.79 0,41.3 L 0,63.02 C 0,65.53 2.037,67.57 4.55,67.57 L 26.27,67.57 C 28.78,67.57 30.82,65.53 30.82,63.02 L 30.82,41.3 C 30.82,38.79 28.78,36.75 26.27,36.75 Z M 16.69,57.45 9.79,52.16 16.69,46.86 Z" />
                </symbol>
            </svg>
            <main>
                <div class="content">
                    <canvas class="scene scene--full" id="scene"></canvas>
                    <script type="x-shader/x-vertex" id="wrapVertexShader">
					attribute float size;
					attribute vec3 color;
					varying vec3 vColor;
					void main() {
						vColor = color;
						vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
						gl_PointSize = size * ( 350.0 / - mvPosition.z );
						gl_Position = projectionMatrix * mvPosition;
					}
				</script>
                    <script type="x-shader/x-fragment" id="wrapFragmentShader">
					varying vec3 vColor;
					uniform sampler2D texture;
					void main(){
						vec4 textureColor = texture2D( texture, gl_PointCoord );
						if ( textureColor.a < 0.3 ) discard;
						vec4 color = vec4(vColor.xyz, 1.0) * textureColor;
						gl_FragColor = color;
					}
				</script>
                    <div class="content__inner">
                        <h2 class="content__title" style="font-weight: bold">NET LAB</h2>
                        <h3 class="content__subtitle">OpenData Project</h3>
                    </div>
                </div>
            </main>
        </div>


        <div class="col-xs-4" style="padding: 0">
            <div class="cls-content">
                <div class="cls-content-sm panel-group accordion" id="accordion" style="margin: 30% auto 0 auto">

                    <div class="panel" style="background-color: rgba(255,255,255,0.1); border: none; border-radius: 5%">
                        <!--<div class="panel-heading" style="min-height: auto">-->
                        <!--    <h4 class="panel-title">-->
                        <!--        <a data-parent="#accordion" data-toggle="collapse" href="#collapseOne" style="color: #FFF">帐号登录</a>-->
                        <!--    </h4>-->
                        <!--</div>-->

                        <!--<div class="panel-collapse collapse in" id="collapseOne">-->
                        <!--    <div class="panel-body">-->
                        <!--        <form autocomplete="off">-->
                        <!--            <div class="form-group">-->
                        <!--                <input type="text" name="username" class="form-control" placeholder="用户名" autofocus value="">-->
                        <!--            </div>-->
                        <!--            <div class="form-group">-->
                        <!--                <input type="password" name="password" class="form-control" placeholder="密码" value="">-->
                        <!--            </div>-->
                        <!--            <div class="checkbox pad-btm text-left">-->
                        <!--                <input id="demo-form-checkbox" class="magic-checkbox" type="checkbox" name="remember-me">-->
                        <!--                <label for="demo-form-checkbox" style="color: #FFF">记住我</label>-->

                        <!--                <a id="login-forget-password-btn" href="javascript:void(0)" class="btn-link text-info pull-right" style="color: #FFF">忘记密码</a>-->
                        <!--            </div>-->
                        <!--            <button class="btn btn-primary btn-lg btn-block" type="button" id="form_login" style="background-color: #EEE; color: #000; border: none">登录</button>-->
                        <!--        </form>-->
                        <!--    </div>-->

                        <!--</div>-->


                        <form class="form-horizontal" autocomplete="off">
                            <span class="heading" style="color: #FFF">专家评议系统<p style="font-size: 14px">NET LAB LOGIN</p></span>

                            <div class="form-group">
                                <input type="text" class="form-control" id="username" name="username" placeholder="用户名" autofocus value="">
                                <i class="fa fa-user"></i>
                            </div>
                            <div class="form-group help">
                                <input type="password" class="form-control" id="password" name="password" placeholder="密码" value="">
                                <i class="fa fa-lock"></i>
                                <a href="#" class="fa fa-question-circle"></a>
                            </div>
                            <div class="form-group">
                                <div class="main-checkbox">
                                    <input type="checkbox" value="None" id="checkbox1" name="remember-me"/>
                                    <label for="checkbox1"></label>
                                </div>
                                <span class="text">记住我</span>
                                <button id="form_login" type="button" class="btn btn-default">立刻登录</button>
                            </div>
                        </form>




                    </div>


                </div>
            </div>
        </div>

    </div>
</div>

</body>

<script th:src="@{../static/login/demo.js}"></script>
<script th:src="@{../static/login/three.min.js}"></script>
<script th:src="@{../static/login/TweenMax.min.js}"></script>
<script th:src="@{../static/login/demo1.js?v=1.0.7}"></script>

</html>

<script>

    $(function(){
        //将在登录页面时的地址栏修改为项目根路径
        var url = window.location.href;
        var valiable = url.replace("/main/login-view", "")
        window.history.pushState({},0,valiable);
    });

    $("#form_login").on("click", function(){
        __button_loading("form_login");
        doLogin();
    });

    document.onkeydown = function(e){
        if(!e) e = window.event;
        if((e.keyCode || e.which) === 13){
            doLogin();
        }
    };

    //表单登录
    function doLogin(){
        var username = $("input[name='username']").val();
        var password = $("input[name='password']").val();
        var rememberMe = $("input[name='remember-me']").is(':checked');
        if(username && password){
            __ajax_post("/authentication/form", {username : username, password : password, "remember-me" : rememberMe}, function(data){
                if(data.code === 200){
                    // location.href = "/main/index";
                    location.href = "/search";
                }else{
                    __toastr_error(data.msg==='Bad credentials' ? '密码错误' : data.msg);
                    $("input[name='password']").val("");
                }
            })
        }
    }

    //发送验证码
    $("#send-smsCode-button").on("click", function(){
        var phone = $("input[name='phone']").val();
        var reg = /^1(3[0-9]|4[5,7]|5[0,1,2,3,5,6,7,8,9]|6[2,5,6,7]|7[0,1,7,8]|8[0-9]|9[1,8,9])\d{8}$/;
        if(!reg.test(phone)){
            __toastr_error("请输入正确的手机号");
            return false;
        }

        __ajax_post("/security/sms/createSms", {phone : phone}, function(data){
            if(data && data.state === 1){
                __toastr_success(data.msg);
                var $btn = $("#send-smsCode-button");
                $btn.attr("disabled", true);
                var wait = 60;
                var time = setInterval(function(){
                    wait -= 1;
                    $btn.text("再次发送("+wait+")");
                    if(wait === 0){
                        clearInterval(time);
                        $btn.attr("disabled", false); $btn.text("发送验证码");
                    }
                }, 1000);
            }else{
                __toastr(data);
            }
        });
    });

    //手机验证码登录
    $("#sms_login").on("click", function(){
        var phone = $("input[name='phone']").val();
        var smsCode = $("input[name='smsCode']").val();
        if(phone && smsCode){
            __ajax_post("/authentication/mobile", {mobile : phone, smsCode : smsCode}, function(data){
                if(data.state === 1){
                    // location.href = "/main/index";
                    location.href = "/search";
                }else{
                    __toastr_error(data.msg);
                }
            })
        }
    });


    //发送邮箱验证码
    $("#send-mailCode-button").on("click", function(){
        var mail = $("input[name='mail']").val();
        var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        if(!reg.test(mail)){
            __toastr_error("请输入正确的邮箱");
            return false;
        }

        var $btn = $("#send-mailCode-button");
        $btn.attr("disabled", true);
        __ajax_post("/security/sms/createMail", {mail : mail}, function(data){
            $btn.attr("disabled", false);
            if(data && data.state === 1){
                __toastr_success("验证码已经发送到您的邮箱");
                $btn.attr("disabled", true);
                var wait = 60;
                var time = setInterval(function(){
                    wait -= 1;
                    $btn.text("再次发送("+wait+")");
                    if(wait === 0){
                        clearInterval(time);
                        $btn.attr("disabled", false); $btn.text("发送验证码");
                    }
                }, 1000);
            }else{
                __toastr(data);
            }
        });
    });

    //邮箱登录
    $("#mail_login").on("click", function(){
        var mail = $("input[name='mail']").val();
        var mailCode = $("input[name='mailCode']").val();
        if(mail && mailCode){
            __ajax_post("/authentication/mail", {mail : mail, mailCode : mailCode}, function(data){
                if(data.state === 1){
                    // location.href = "/main/index";
                    location.href = "/search";
                }else{
                    __toastr_error(data.msg);
                }
            })
        }
    });

    //忘记密码
    $("#login-forget-password-btn").on("click", function(){
        window.location.href = "/main/forgetPassword";
    });

</script>